<!-- 门店端系统设置页面 -->
<template>
  <div class="bgc-default">
    <div class="top-nav">
      <template v-for="(item, key) of topNavBar">
        <div :key="key" class="nav-item" v-if="item.showFlag" :class="{'nav-active' : selectedNavKey === key}"
          @click="goTarget(key)">{{item.name}}</div>
      </template>
    </div>
    <div class="bg-color-white pad-20 mar-20">
      <!-- 账期设置 -->
      <div class="scroll-item" id="business-set" v-if="topNavBar['business-set'].showFlag">
        <div class="scroll-title-row">
          <div class="scroll-title">经营设置</div>
        </div>
        <div class="config-item">
          <h5>营业时间</h5>
          <div>
            <div class="v-align-c">
              <label class="config-label mar-r-15">每天重复</label>
              <!-- 							<el-time-select placeholder="起始时间" v-model="startTime" :picker-options="{
							      start: '08:30',
							      step: '00:15',
							      end: '18:00'
							    }">
							</el-time-select> -->
              <el-time-picker v-model="form.busStartTime" format='HH:mm:ss' value-format='HH:mm:ss'
                :picker-options="{selectableRange: '00:00:00 - 23:59:59'}" placeholder="营业开始时间">
              </el-time-picker>
              <el-time-picker v-model="form.busEndTime" format='HH:mm:ss' value-format='HH:mm:ss'
                :picker-options="{selectableRange: '00:00:00 - 23:59:59'}" placeholder="营业结束时间">
              </el-time-picker>
              <!-- 							<el-time-select placeholder="结束时间" v-model="endTime" :picker-options="{
							      start: '08:30',
							      step: '00:15',
							      end: '18:00',
							      minTime: startTime
							    }">
							</el-time-select> -->
            </div>
            <div class="config-tip font-12 font-color-9">
              默认时间为早上07:00到下午18:00，设置后在云店小程序上系统将自动计算是【今日送达】还是【次日送达】</div>
          </div>
        </div>
        <div class="config-item">
          <h5>满额免配送费</h5>
          <div>
            <div class="v-align-c">
              <label class="config-label mar-r-15">活动设置</label>
              <el-switch v-model="form.isOpenFreeDeliveryFee" active-color="#13ce66" inactive-color="#ff4949"
                :active-value=1 :inactive-value=0>
              </el-switch>
              <div class="v-align-c" v-if="form.isOpenFreeDeliveryFee===1" style="margin-left: 20px;">
                <div class="el-input-group--prepend">
                  <div class="el-input-group__prepend" style="height:36px">满</div>
                </div>
                <el-input-number :precision="2" style="width: 80px;" v-model="form.freeDeliveryFeeAmount"
                  :controls="false">
                </el-input-number>
                <div class="el-input-group--prepend">
                  <div class="el-input-group__prepend" style="height:36px">元，免配送费</div>
                </div>
              </div>
            </div>
            <div class="v-align-c" v-if="form.isOpenFreeDeliveryFee===1" style="margin-left: 60px;margin-top: 10px">
              <label class="config-label mar-r-15"></label>
              <el-checkbox :true-label=1 :false-label=0 v-model="form.isOpenFixedDeliveryFee">不满足条件固定配送费</el-checkbox>
            </div>
            <div class="v-align-c" v-if="form.isOpenFreeDeliveryFee===1 && form.isOpenFixedDeliveryFee===1"
              style="margin-left: 60px;margin-top: 10px">
              <label class="config-label mar-r-15"></label>
              <div class="el-input-group--prepend">
                <div class="el-input-group__prepend" style="height:36px">不满，固定配送费</div>
              </div>
              <el-input-number :precision="2" style="width: 80px;" v-model="form.fixedDeliveryFee" :controls="false">
              </el-input-number>
              <div class="el-input-group--prepend">
                <div class="el-input-group__prepend" style="height:36px">元</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom-bar">
      <el-button type="primary" @click="saveStoreConfig" :disabled="disabledSave">保存</el-button>
    </div>
  </div>
</template>

<script>
  import {
    saveStoreSettingByEnterprise,
    getMemberStoreByMemberId
  } from '@/api/user/member'
  export default {
    data() {
      return {
        topNavBar: {
          'business-set': {
            name: '经营设置',
            target: 'business-set',
            showFlag: true
          }
        },
        selectedNavKey: 'business-set',
        disabledSave: false,
        form: {
          busStartTime: '',
          busEndTime: '',
          isOpenFreeDeliveryFee: 0,
          freeDeliveryFeeAmount: 0,
          isOpenFixedDeliveryFee: 0

        }
      }
    },
    created() {
      const params = {}
      params.memberId = this.getMemberId()
      getMemberStoreByMemberId(params).then(response => {
        if (response.isError) return
        this.form = response.data
        if (response.data && response.data.businessStartTime) {
          // this.form.busStartTime = response.data.businessStartTime
          this.$set(this.form, 'busStartTime', response.data.businessStartTime)
        } else {
          this.$set(this.form, 'busStartTime', '07:00:00')
        }
        if (response.data && response.data.businessEndTime) {
          // this.form.busEndTime = response.data.businessEndTime
          this.$set(this.form, 'busEndTime', response.data.businessEndTime)
        } else {
          this.$set(this.form, 'busStartTime', '18:00:00')
        }
      })
    },
    methods: {
      // 目标区域滚动
      goTarget(id) {
        document.querySelector('#' + id).scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        })
        this.selectedNavKey = id
      },
      saveStoreConfig() {
        if (this.form.busStartTime === null ||
          this.form.busStartTime === undefined ||
          this.form.busStartTime === '') {
          this.msgError('营业开始时间不能为空')
          return
        }
        if (this.form.busEndTime === null ||
          this.form.busEndTime === undefined ||
          this.form.busEndTime === '') {
          this.msgError('营业结束时间不能为空')
          return
        }
        if (this.form.isOpenFreeDeliveryFee === 1) {
          if (this.form.freeDeliveryFeeAmount <= 0) {
            this.msgError('满额金额必须要大于0')
            return
          }
          if (this.form.isOpenFixedDeliveryFee === 1) {
            if (this.form.fixedDeliveryFee < 0 ||
              this.form.fixedDeliveryFee === null ||
              this.form.fixedDeliveryFee === undefined) {
              this.msgError('固定配送费填写错误')
              return
            }
          }
        } else {
          this.form.isOpenFixedDeliveryFee = 0
        }
        if (this.form.isOpenFreeDeliveryFee === 0) {
          this.form.freeDeliveryFeeAmount = 0
        }
        if (this.form.isOpenFixedDeliveryFee === 0) {
          this.form.fixedDeliveryFee = 0
        }
        const data = {}
        const that = this
        data.memberId = this.getMemberId()
        data.businessStartTime = this.form.busStartTime
        data.businessEndTime = this.form.busEndTime
        data.isOpenFreeDeliveryFee = this.form.isOpenFreeDeliveryFee
        data.freeDeliveryFeeAmount = this.form.freeDeliveryFeeAmount
        data.isOpenFixedDeliveryFee = this.form.isOpenFixedDeliveryFee
        data.fixedDeliveryFee = this.form.fixedDeliveryFee
        saveStoreSettingByEnterprise(data).then(response => {
          if (response.isError) return
          that.msgSuccess(response.msg)
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .bgc-default {
    padding-bottom: 70px;
  }

  .top-nav {
    position: sticky;
    top: 50px;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    display: flex;
    align-items: center;
    // justify-content: space-around;
    z-index: 999;
    box-shadow: 0 2px 6px #eee;

    .nav-item {
      cursor: pointer;
      margin-left: 35px
    }

    .nav-active {
      position: relative;
      color: #409eff;

      &::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: -15px;
        width: calc(100% + 30px);
        height: 2px;
        background-color: #409eff;
      }
    }
  }

  .scroll-item {
    .scroll-title-row {
      background-color: #f7f8fa;
      padding-left: 20px;

      .scroll-title {
        height: 50px;
        line-height: 50px;
        padding-left: 10px;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 25px;
          width: 3px;
          height: 15px;
          background-color: #006aff;
          transform: translateY(-50%);
        }
      }
    }

    .config-item {
      margin-bottom: 40px;

      .mar-t-40 {
        margin-top: 40px;
      }

      h5 {
        width: 150px;
        text-align: right;
        font-size: 14px;
        margin: 26px 0 6px;
      }

      .config-label {
        font-size: 14px;
        font-weight: unset;
        width: 275px;
        text-align: right;
      }

      .config-label-2 {
        font-size: 14px;
        font-weight: unset;
        width: 100px;
        text-align: right;
      }

      .config-tip {
        margin-left: 290px;
      }

      .config-tip-2 {
        margin-left: 405px;
      }

      /deep/ .el-upload--picture-card {
        width: 150px;
        height: 50px;
        box-sizing: unset;
        line-height: 60px;

        img {
          border-radius: 6px;
        }
      }
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    z-index: 999;
    box-shadow: 0 -2px 8px #eeeeee;

    .el-button {
      width: 100px;
      height: 40px;
      line-height: 40px;
      padding: 0;
    }
  }
</style>
